<template>
  <div class="birthday-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🎂 生日提醒管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleSendBatch">
              <el-icon><Message /></el-icon>
              批量发送祝福
            </el-button>
            <el-button type="success" @click="handleSettings">
              <el-icon><Setting /></el-icon>
              生日设置
            </el-button>
          </div>
        </div>
      </template>

      <!-- 生日统计 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <div class="stat-card today">
            <div class="stat-label">今日生日</div>
            <div class="stat-value">{{ todayBirthdays }}</div>
            <el-button type="primary" size="small" @click="handleSendToday" style="margin-top: 10px;">
              立即发送
            </el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card week">
            <div class="stat-label">本周生日</div>
            <div class="stat-value">{{ weekBirthdays }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card month">
            <div class="stat-label">本月生日</div>
            <div class="stat-value">{{ monthBirthdays }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card sent">
            <div class="stat-label">已发送祝福</div>
            <div class="stat-value success">{{ sentBirthdays }}</div>
          </div>
        </el-col>
      </el-row>

      <!-- 生日日历 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="今日生日" name="today">
          <el-table :data="todayBirthdayList" border>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="130" />
            <el-table-column prop="level" label="会员等级" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="80">
              <template #default="{ row }">
                {{ row.age }}岁
              </template>
            </el-table-column>
            <el-table-column prop="totalConsumption" label="累计消费" width="120">
              <template #default="{ row }">
                ¥{{ row.totalConsumption.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="giftAmount" label="生日礼金" width="100">
              <template #default="{ row }">
                <span style="color: #67c23a; font-weight: bold;">¥{{ row.giftAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sent" label="发送状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.sent ? 'success' : 'warning'">
                  {{ row.sent ? '已发送' : '未发送' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button 
                  v-if="!row.sent" 
                  link 
                  type="primary" 
                  @click="handleSend(row)"
                >
                  发送祝福
                </el-button>
                <el-button link type="success" @click="handleCall(row)">电话祝福</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="本周生日" name="week">
          <el-calendar v-model="selectedDate">
            <template #date-cell="{ data }">
              <div class="calendar-day">
                <div class="day-number">{{ data.day.split('-')[2] }}</div>
                <div v-if="getBirthdayCount(data.day) > 0" class="birthday-badge">
                  <el-badge :value="getBirthdayCount(data.day)" type="danger" />
                </div>
              </div>
            </template>
          </el-calendar>
        </el-tab-pane>

        <el-tab-pane label="本月生日" name="month">
          <el-table :data="monthBirthdayList" border stripe>
            <el-table-column prop="date" label="日期" width="100" />
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="130" />
            <el-table-column prop="level" label="等级" width="120" />
            <el-table-column prop="age" label="年龄" width="80" />
            <el-table-column prop="giftAmount" label="礼金" width="100">
              <template #default="{ row }">
                ¥{{ row.giftAmount }}
              </template>
            </el-table-column>
            <el-table-column prop="sent" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.sent ? 'success' : 'info'">
                  {{ row.sent ? '已发送' : '待发送' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="发送记录" name="history">
          <el-table :data="birthdayHistory" border stripe>
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="130" />
            <el-table-column prop="birthdayDate" label="生日日期" width="100" />
            <el-table-column prop="sendTime" label="发送时间" width="160" />
            <el-table-column prop="channel" label="发送渠道" width="120">
              <template #default="{ row }">
                <el-tag v-for="ch in row.channels" :key="ch" size="small" style="margin-right: 5px;">
                  {{ ch }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="giftAmount" label="礼金" width="100" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag type="success">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 生日设置对话框 -->
    <el-dialog v-model="settingsDialogVisible" title="生日祝福设置" width="700px">
      <el-form :model="birthdaySettings" label-width="120px">
        <el-form-item label="自动发送">
          <el-switch v-model="birthdaySettings.autoSend" />
          <div class="form-tip">开启后在会员生日当天自动发送祝福</div>
        </el-form-item>

        <el-form-item label="发送时间">
          <el-time-picker
            v-model="birthdaySettings.sendTime"
            placeholder="选择时间"
            value-format="HH:mm"
          />
        </el-form-item>

        <el-form-item label="提前通知">
          <el-input-number v-model="birthdaySettings.advanceDays" :min="0" :max="7" />
          <span style="margin-left: 10px;">天</span>
          <div class="form-tip">生日前N天发送提前祝福</div>
        </el-form-item>

        <el-form-item label="发送渠道">
          <el-checkbox-group v-model="birthdaySettings.channels">
            <el-checkbox label="短信">短信</el-checkbox>
            <el-checkbox label="微信">微信</el-checkbox>
            <el-checkbox label="APP">APP推送</el-checkbox>
            <el-checkbox label="邮件">邮件</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="祝福文案">
          <el-input v-model="birthdaySettings.template" type="textarea" :rows="4" />
          <div class="form-tip">支持变量: {name}会员姓名 {age}年龄 {gift}礼金金额</div>
        </el-form-item>

        <el-divider>生日礼金设置</el-divider>

        <el-form-item label="普通会员">
          <el-input-number v-model="birthdaySettings.gifts.normal" :min="0" />
          <span style="margin-left: 10px;">元</span>
        </el-form-item>

        <el-form-item label="银卡会员">
          <el-input-number v-model="birthdaySettings.gifts.silver" :min="0" />
          <span style="margin-left: 10px;">元</span>
        </el-form-item>

        <el-form-item label="金卡会员">
          <el-input-number v-model="birthdaySettings.gifts.gold" :min="0" />
          <span style="margin-left: 10px;">元</span>
        </el-form-item>

        <el-form-item label="钻石会员">
          <el-input-number v-model="birthdaySettings.gifts.diamond" :min="0" />
          <span style="margin-left: 10px;">元</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="settingsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveSettings">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Message, Setting } from '@element-plus/icons-vue'

const todayBirthdays = ref(12)
const weekBirthdays = ref(45)
const monthBirthdays = ref(156)
const sentBirthdays = ref(8)

const activeTab = ref('today')
const selectedDate = ref(new Date())

const todayBirthdayList = ref([
  { memberName: '张三', phone: '13800138001', level: '钻石会员', age: 34, totalConsumption: 125678, giftAmount: 200, sent: true },
  { memberName: '李四', phone: '13800138002', level: '金卡会员', age: 32, totalConsumption: 85234, giftAmount: 100, sent: false }
])

const monthBirthdayList = ref([
  { date: '01-25', memberName: '王五', phone: '13800138003', level: '银卡会员', age: 28, giftAmount: 50, sent: false },
  { date: '01-28', memberName: '赵六', phone: '13800138004', level: '普通会员', age: 25, giftAmount: 0, sent: false }
])

const birthdayHistory = ref([
  { memberName: '张三', phone: '13800138001', birthdayDate: '01-20', sendTime: '2024-01-20 08:00', channels: ['短信', '微信'], giftAmount: '¥200', status: '已发送' }
])

const settingsDialogVisible = ref(false)

const birthdaySettings = reactive({
  autoSend: true,
  sendTime: '08:00',
  advanceDays: 0,
  channels: ['短信', '微信'],
  template: '亲爱的{name}，祝您生日快乐！特别赠送您{gift}元生日礼金，感谢您一直以来的支持！',
  gifts: {
    normal: 0,
    silver: 50,
    gold: 100,
    diamond: 200
  }
})

const getBirthdayCount = (date) => {
  // 模拟获取某天生日的会员数
  return Math.floor(Math.random() * 5)
}

const handleSendBatch = () => {
  ElMessage.success('批量发送生日祝福成功')
}

const handleSettings = () => {
  settingsDialogVisible.value = true
}

const handleSendToday = () => {
  ElMessage.success(`向${todayBirthdays.value}位会员发送生日祝福成功`)
}

const handleSend = (row) => {
  ElMessage.success(`向${row.memberName}发送生日祝福成功`)
  row.sent = true
}

const handleCall = (row) => {
  ElMessage.info(`发起电话生日祝福: ${row.phone}`)
}

const handleSaveSettings = () => {
  ElMessage.success('设置保存成功')
  settingsDialogVisible.value = false
}
</script>

<style scoped>
.birthday-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.stat-cards {
  margin-bottom: 30px;
}

.stat-card {
  padding: 30px;
  background: white;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.stat-card.today {
  border-top: 4px solid #f56c6c;
}

.stat-card.week {
  border-top: 4px solid #e6a23c;
}

.stat-card.month {
  border-top: 4px solid #409eff;
}

.stat-card.sent {
  border-top: 4px solid #67c23a;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 15px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
}

.stat-value.success {
  color: #67c23a;
}

.calendar-day {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.day-number {
  font-size: 16px;
}

.birthday-badge {
  margin-top: 5px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>

